<template>
  <div class="title_control" :class="className">
    <div class="title_item">
      <h2>{{ title }}</h2>
      <p v-if="desc">{{ desc }}</p>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "TitleControl",
  props: {
    title: {
      type: String,
      default() {
        return "Title";
      },
    },
    desc: {
      type: String,
      default() {
        return "";
      },
    },
    className: {
      type: String,
      default() {
        return "";
      },
    },
  },
};
</script>

<style lang="scss">
.title_control {
  clear: both;
  margin-top: 1.25rem;
  padding: 0 0 1rem 0;
  display: flex;
  .title_item {
    display: flex;
  }
  &.slot {
    justify-content: space-between;
    flex-direction: row;
  }
  &.small {
    h2 {
      font-size: 1rem;
    }
  }
  &.double {
    .title_item {
      flex-direction: column;
      padding: 0 0 2rem 0;
      h2 {
        font-size: 1rem;
      }
      p {
        margin-left: 0;
        font-size: 1.5rem;
        color: var(--dark);
        font-weight: 700;
      }
    }
  }
  h2 {
    font-size: 1.5rem;
  }
  p {
    font-size: 0.5rem;
    display: flex;
    align-items: center;
    margin-left: 1rem;
    color: rgba(0, 0, 0, 0.5);
  }
}
</style>
